/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect, useRef } from "react";
import Dren from "../3Dren/index";
import Zhongyinwen from "../zhongyinwen";
import { useTranslation } from "react-i18next";

import "./index.css";

function home() {
  const { t } = useTranslation();
  const lanse = () => {
    if (document.body.className === "beijing") {
      document.body.className = "beijings";
    } else {
      document.body.className = "beijing";
    }
  };
  const yvyinye = () => {
    window.location.href = "/style";
  };

  const [comments, setComments] = useState([]); // 存储弹幕列表
  const [inputValue, setInputValue] = useState(""); // 输入框的值
  const containerRef = useRef(null); // 弹幕容器的引用

  // 发送评论
  const handleSubmit = () => {
    if (inputValue.trim() === "") return; // 如果输入为空，不发送
    setComments((prev) => [
      ...prev,
      { text: inputValue, key: Date.now(), visible: true },
    ]);
    setInputValue(""); // 清空输入框
  };

  // 动态计算每个弹幕的开始位置
  useEffect(() => {
    const container = containerRef.current;
    const danmus = container.querySelectorAll(".danmu");
    danmus.forEach(
      (
        item: {
          style: {
            color: string;
            animationDelay: string;
          };
        },
        index: number
      ) => {
        item.style.animationDelay = `${index + 1}s`; // 每个弹幕延迟 2 秒开始动画
        // 随机颜色
        item.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        // 新评论换行
        if (index === 0) {
          item.style.animationDelay = "2s";
        } else if (index % 2 === 0) {
          item.style.animationDelay = `${(index + 1) * 2}s`;
        } else {
          item.style.animationDelay = `${(index + 1) * 2 - 1}s`;
        }
      }
    );
  }, [comments]);

  return (
    <>
      <>
        <div className="box">
          <div className="top"></div>
          <div className="zhongjian">
            <Dren></Dren>
            <div className="imagesshang">
              <div className="buanjian">
                <div className="aiz">
                  <button onClick={lanse}>{t("switchTheme")}</button>
                  <Zhongyinwen></Zhongyinwen>
                </div>
                <br />
                <div className="tou">
                  <span className="soanaln">我牛逼啊都多余了</span>
                  <div className="niaoling"></div>
                </div>
              </div>

              <div className="images">
                <video
                  src="public/videos/bw.mp4"
                  className="video"
                  controls
                ></video>
                <div className="input-container">
                  <input
                    type="text"
                    className="inputs"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                  />
                  <button onClick={handleSubmit}>发送评论</button>
                </div>
                <div className="zhezhao" ref={containerRef}>
                  {comments.map((comment) => (
                    <span className="danmu" key={comment.key}>
                      {comment.text}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="dibu">
            <div className="yvyin" onClick={yvyinye}></div>
          </div>
        </div>
      </>
    </>
  );
}

export default home;
